<template>
  <div>
    <!--工具条-->
    <div style="height: 40px;line-height: 40px;margin-bottom: 10px;">
      <el-button size="mini" style="margin-left: 10px;" type="primary" @click="saveOrUpdate()">新增</el-button>
    </div>
    <el-row>
      <el-col :span="4">
        <el-tree :data="data" :load="loadNode" :props="defaultProps" class="dept" lazy @node-click="query"></el-tree>
      </el-col>
      <el-col :span="20">
        <!--数据列表-->
        <el-table :border="true" :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column header-align="center" label="部门编号" prop="deptno">
          </el-table-column>
          <el-table-column header-align="center" label="部门名称" prop="name" width="220">
          </el-table-column>
          <el-table-column header-align="center" label="说明" prop="note" width="150">
          </el-table-column>
          <el-table-column header-align="center" label="排序" prop="sorts" width="150">
          </el-table-column>
          <el-table-column align="center" header-align="center" label="操作" width="180">
            <template v-slot="scope">
              <el-button circle icon="el-icon-edit" size="mini" title="修改" type="primary"
                         @click="saveOrUpdate(scope.row)">
              </el-button>
              <el-button circle icon="el-icon-delete" size="mini" title="删除" type="danger" @click="del(scope.row.id)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--保存或修改-->
    <SaveOrUpdate ref="saveOrUpdate" :visible.sync="isshow" @refreshData="refreshData"></SaveOrUpdate>
  </div>
</template>

<script>
//导入编辑组件
const SaveOrUpdate = () => import("@/views/sys/dept/SaveOrUpdate")
export default {
  data() {
    return {
      tableData: [],
      isshow: false, //是否显示编辑框
      user: {}, //登录用户信息
      pid: "1", //默认查询根级部门
      pname: "",
      data: [],
      deptno: "",
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'isLeaf'
      }
    }
  },
  created() {
    this.user = this.$session.getUser()
    this.initData()
  },
  components: {
    SaveOrUpdate
  },
  methods: {
    refreshData() {
      this.refreshTree()
      this.initData()
    },
    query(data) {
      this.pid = data.id
      this.pname = data.name
      this.initData()
      this.deptno = data.deptno
    },

    loadNode(node, resolve) {
      this.pid = node.data.id
      let params = {
        "pid": this.pid,
        "euid": this.user.euid
      }
      this.$api.queryTree(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            resolve(res.data)
          }
        })
    },

    refreshTree() {
      let params = {
        "pid": "1",
        "euid": this.user.euid
      }
      this.$api.queryTree(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            this.data = res.data
          }
        })
    },

    //新增或修改
    saveOrUpdate(data) {
      this.isshow = true;
      this.$nextTick(function () {
        this.$refs.saveOrUpdate.init(data, {'id': this.pid, 'name': this.pname})
      })
    },

    //删除
    del(id) {
      this.$confirm('您确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteDept({
          id
        })
          .then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.refreshData()
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
      }).catch(() => {});
    },

    //查询数据
    initData() {
      let params = {
        "deptno": this.deptno,
        "euid": this.user.euid
      };
      this.$api.queryChildDept(params)
        .then(res => {
          //判断接口数据是否正常
          if (res.code === 200) {
            this.tableData = res.data
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.search_ipt {
  width: 200px;
  margin-left: 5px;
}

.toolbar {
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}

.toolbar span {
  margin-left: 20px;
}

.dept {
  border: #ccc solid 1px;
  margin: 0 2px;
  border-radius: 2px;
}
</style>
